<template>
  <view>
    <view class="context box-shadow" @click="popupOpen">
      <view class="left">
        <view style="position: absolute; top: -70rpx;">
          <u-icon name="/static/index/ERCode.png" size="200"></u-icon>
        </view>
      </view>
      <view class="center">
        <view style="position: absolute; top: 20rpx;left: 196rpx;">
          <u--text :bold="true" size="36" color="#030303" :selectable="false" text="我的二维码" />
          <view style="height: 18rpx;"></view>
          <u--text :bold="false" size="24" color="#464646" :selectable="false" text="开门一扫即可" />
        </view>
      </view>
      <view class="right">
        <view style="position: absolute; top: 26rpx; right: 40rpx;">
          <u-icon name="/static/index/scan.png" size="100"></u-icon>
        </view>
      </view>
    </view>
    <u-popup class="radius-top" :show="popupShow" @close="popupClose" @open="popupOpen">
      <view class="weixin-mid pos-rel">
        <image class="head"></image>
        <text color="#999">wife密码：123456</text>
        <image class="img" src="/static/index/qrCode.jpg"></image>
        <text color="#999">到店出示该二维码，即可开门、开柜</text>
      </view>
    </u-popup>
  </view>

</template>

<script>
	export default {
		name: "my-index-ER",
		data() {
			return {
        popupShow:false,
			};
		},
    methods:{
      popupClose(){
        this.popupShow = false
      },
      popupOpen(){
        console.log(this.popupClose,'this.popupClose');
        this.popupShow = true
      },
      previewImage(){
        uni.previewImage({
          // 需要预览的图片链接列表
          urls: [],
          // 为当前显示图片的链接/索引值
          current: '/static/mp-weixin/qrCode.jpg',
          // 图片指示器样式
          indicator:'default',
          // 是否可循环预览
          loop:false,
          // 长按图片显示操作菜单，如不填默认为保存相册
          // longPressActions:{
          // 	itemList:[this.l('发送给朋友'),this.l]
          // },
          success: res => {
            console.log('res', res);
          },
          fail: err => {
            console.log('err', err);
          }
        });
      }
    }
	}
</script>

<style lang="less" scoped>
	.context {
		position: relative;
		margin: 100rpx 40rpx 20rpx 40rpx;
		height: 150rpx;
		width: auto;
		border-radius: 80rpx;
    background:#fff;
	}
	.left{
		
	}
  .weixin-mid{
    padding:50rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color:#999;
    .head{
      width:150rpx;
      height:150rpx;
      border-radius:100%;
      background:#ccc;
      border:2px solid #ddd;
      margin:0rpx 0rpx 20rpx 0rpx;
    }
    .img{
      width:400rpx;
      height:400rpx;
      margin:40rpx 0rpx 20rpx 0rpx;
    }
  }
	
</style>
